<template>
    <el-dialog :model-value="visible" :title="$t('user.assignRoleDialogTitle')" width="800px" :before-close="cb=>cancelForm()">
        <el-row class="operate ">
            <el-alert :title="$t('data.tip.selected',{count:selectData.length})" type="warning" show-icon :closable='false'></el-alert>
        </el-row>
        <el-table ref="multipleTableRef" :data="tableData" height="400" border @selection-change="handleSelectionChange" v-loading="loading">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="roleName" :label="$t('role.roleName')" />
            <el-table-column prop="description" :label="$t('role.description')" />
        </el-table>
        <template #footer>
            <el-button @click="cancelForm()" >{{$t('data.button.cancel')}}</el-button>
            <el-button type="primary" :loading="isSaveing" @click="submitForm()">{{$t('data.button.confirm')}}</el-button>
        </template>
    </el-dialog>
</template>
<script>
import userApi from '@/api/user'
import roleApi from '@/api/role'
export default {
    props:{
        userId:{
            type:Number
        },
        visible:{
            type:Boolean,
            default:false
        },
    },
    emits:['submit','close'],
    data(){
        return{
            isSaveing:false,
            selectData:[],
            tableData:[],
            loading:false,
        }
    },
    watch:{
        visible:function(){
            if(this.visible){
                this.selectData=[]                
                this.loading=true
                this.$nextTick().then(()=>{
                   this.$refs.multipleTableRef.clearSelection()
                   Promise.all([this.getUserRoles(),this.getAllRoles()]).then(()=>{
                        let rows=this.tableData.filter(a=>this.selectData.indexOf(a.roleId)>-1)
                        rows.forEach(row=>this.$refs.multipleTableRef.toggleRowSelection(row,true))                                        
                        this.loading=false
                    }).catch(()=>{
                        this.loading=false
                    })
                })
                
            }
        }
    },
    methods:{
        submitForm(){
            this.$emit('submit',this.selectData);
        },
        cancelForm(){
            this.$emit('close');
        },
        handleSelectionChange(data){
            console.log('handleSelectionChange',data)
            this.selectData=(data || []).map(a=>a.roleId);
        },
        getUserRoles(){
            return userApi.getUserRoles(this.userId).then(d=>{
                    if(!!d && d.code=='200'){
                        this.selectData=(d.data || []).map(a=>a.roleId)
                        return Promise.resolve()
                    }
                    return Promise.reject()
                })
        },
        getAllRoles(){
            return roleApi.roleList().then(d=>{
                if(!!d && d.code=='200'){
                    this.tableData=(d.data || [])
                    return Promise.resolve()
                }
                return Promise.reject()
            })
        }
    }
}
</script>